<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>微信客服管理</span>
      </div>
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        class="ele-form-search"
        label-width="60px"
        @keyup.enter.native="reload"
        @submit.native.prevent
      >
        <div class="app-container">
          <div class="filter-container">
            <el-select
              v-model="where.platform"
              class="filter-item"
              clearable
              placeholder="推广平台"
              style="width: 140px"
              @change="setPlatformList"
            >
              <el-option
                v-for="item in platformList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-select
              v-if="whereBazaarList.length > 0"
              v-model="where.bazaarId"
              class="filter-item"
              clearable
              placeholder="推广市场"
              style="width: 160px"
              @change="setBazaarList"
            >
              <el-option
                v-for="item in whereBazaarList"
                :key="item.id"
                :disabled="item.status === 0"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-select
              v-model="where.customerid"
              class="filter-item"
              clearable
              v-show="authority"
              placeholder="归属客户"
              style="width: 140px"
              @change="reload"
            >
              <el-option
                v-for="item in customerList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>

            <el-select
              v-model="where.zoneid"
              class="filter-item"
              clearable
              v-show="authority"
              placeholder="微信分组"
              style="width: 140px"
              @change="reload"
            >
              <el-option
                v-for="item in zoneList"
                :key="item.id"
                :disabled="item.status === 0"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="where.status"
              class="filter-item"
              clearable
              placeholder="状态"
              style="width: 100px"
              @change="reload"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="where.sex"
              class="filter-item"
              clearable
              placeholder="性别"
              style="width: 100px"
              @change="reload"
            >
              <el-option
                v-for="item in sexList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-input
              v-model="where.nickname"
              class="filter-item"
              clearable
              placeholder="微信昵称"
              style="width: 140px"
              @clear="reload"
            />

            <el-input
              v-model="where.wechat"
              class="filter-item"
              clearable
              placeholder="微信号"
              style="width: 140px"
              @clear="reload"
            />

            <el-input
              v-model="where.name"
              class="filter-item"
              clearable
              placeholder="使用员工"
              style="width: 140px"
              @clear="reload"
            />

            <el-button
              class="filter-item"
              icon="el-icon-search"
              type="primary"
              @click="reload"
              >搜索
            </el-button>

            <el-button
              class="filter-item"
              icon="el-icon-refresh"
              style="margin-left: 2px"
              @click="reset"
              >重置
            </el-button>
          </div>
        </div>
      </el-form>

      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="url"
        v-loading="tableLoading"
        @cell-click="handleClickRow"
        :max-height="defaultHeight"
        :parse-data="parseData"
        :selection.sync="selection"
        :where="where"
        stripe
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            v-if="$hasPermission('service:save')"
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="openEdit({})"
            >添加客服
          </el-button>

          <el-button
            v-if="$hasPermission('service:delete')"
            :disabled="selection.length === 0"
            icon="el-icon-delete"
            size="small"
            type="danger"
            @click="removeBatch"
            >删除微信
          </el-button>

          <el-button
            v-if="$hasPermission('service:pause')"
            :disabled="selection.length === 0"
            icon="el-icon-_date-start"
            size="small"
            @click="SetPauseShow"
            >启用暂停
          </el-button>

          <el-button
            v-if="$hasPermission('service:groups')"
            :disabled="selection.length === 0"
            icon="el-icon-edit-outline"
            size="small"
            @click="SetGroupShow"
            >客服设置
          </el-button>
        </template>

        <!-- 推广平台列 -->
        <template slot="platform" slot-scope="{ row }">
          <template v-for="item in platformList">
            <span v-if="item.value === row.platform" :key="item.value">
              {{ item.label }}
            </span>
          </template>
        </template>

        <!-- 推广市场列 -->
        <template slot="bazaarId" slot-scope="{ row }">
          <template v-for="item in bazaarList">
            <span v-if="item.id === row.bazaarId" :key="item.id">
              {{ item.name }}
            </span>
          </template>
        </template>

        <!-- 推广分组列 -->
        <template slot="zoneid" slot-scope="{ row }">
          <template v-for="item in zoneList">
            <span v-if="item.id === row.zoneid" :key="item.id">
              {{ item.name }}
            </span>
          </template>
        </template>

        <!-- 归属客户列 -->
        <template slot="customerid" slot-scope="{ row }">
          <template v-for="item in customerList">
            <span v-if="item.id === row.customerid" :key="item.id">
              {{ item.name }}
            </span>
          </template>
        </template>

        <!-- 状态列 -->
        <template slot="status" slot-scope="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="editState(row)"
          />
        </template>

        <!-- 性别列 -->
        <template slot="sex" slot-scope="{ row }">
          <img v-if="!row.sex" class="el-sex" src="@/assets/image/female.png" />
          <img v-if="row.sex" class="el-sex" src="@/assets/image/male.png" />
        </template>

        <!-- 二维码列 -->
        <template slot="qrcode" slot-scope="{ row }">
          <span @click="viewQrcode(row.qrcode)">
            <el-tooltip
              class="item"
              content="该微信号未上传二维码"
              effect="dark"
              placement="top-start"
            >
              <i
                v-if="!row.qrcode"
                class="el-tooltip item el-icon-_eye-close ele-text-placeholder"
                style="font-size: 18px; cursor: pointer"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              content="点击查看二维码图片"
              effect="dark"
              placement="top-start"
            >
              <i
                v-if="row.qrcode"
                class="el-tooltip item el-icon-view"
                style="font-size: 18px; cursor: pointer"
              ></i>
            </el-tooltip>
          </span>
        </template>

        <!-- 最后展示时间列 -->
        <template slot="lasttime" slot-scope="{ row }">
          <span v-if="row.lasttime">{{ row.lasttime }}</span>
          <span v-else>-</span>
        </template>

        <!-- 展示次数列 -->
        <template slot="number" slot-scope="{ row }">
          <template v-if="row.editNumber">
            <el-input
              @blur="handleClickBlur(row)"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              v-model="row.newNumber"
              class="edit-input"
              ref="newNumber"
              size="mini"
            />
          </template>
          <span v-else style="cursor: pointer">{{ row.number }}</span>
        </template>

        <!-- 今日复制次数列 -->
        <template slot="daycopynumber" slot-scope="{ row }">
          <span v-if="row.daycopynumber">{{ row.daycopynumber }}</span>
          <span v-else>0</span>
        </template>

        <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }">
          <el-link
            v-if="$hasPermission('service:update')"
            :underline="false"
            icon="el-icon-edit-outline"
            type="primary"
            @click="openEdit(row)"
            >修改
          </el-link>

          <el-popconfirm
            v-if="$hasPermission('service:delete')"
            class="ele-action"
            title="确定要删除此客服吗？"
            @confirm="remove(row)"
          >
            <el-link
              slot="reference"
              :underline="false"
              icon="el-icon-delete"
              type="danger"
              >删除
            </el-link>
          </el-popconfirm>

          <!--   <el-dropdown
            v-if="$hasPermission('service:reveal')"
            @command="(command) => handleClick(command, row)"
          >
            <el-link :underline="false" icon="el-icon-setting" type="primary">
              操作 <i class="el-icon-arrow-down" />
            </el-link>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="0"
                ><i class="el-icon-plus" /> 增加10次展示</el-dropdown-item
              >
              <el-dropdown-item command="1"
                ><i class="el-icon-minus" /> 减少10次展示</el-dropdown-item
              >
              <el-dropdown-item command="2"
                ><i class="el-icon-_forward" /> 重置展示</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>-->
        </template>
      </ele-pro-table>
    </el-card>

    <!-- 编辑弹窗 -->
    <vue-edit
      :customerList="customerList"
      :bazaar="bazaarList"
      :data="current"
      :authority="authority"
      :visible.sync="showEdit"
      :zone="zoneList"
      @done="reload"
    />

    <!-- 状态编辑弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :lock-scroll="false"
      :title="'设置客服状态'"
      :visible.sync="PauseShowEdit"
      custom-class="ele-dialog-form"
      width="460px"
      @closed="PauseForm = {}"
    >
      <el-form ref="PauseForm" :model="PauseForm" label-width="82px">
        <el-form-item label="暂停状态:">
          <el-radio v-model="PauseForm.status" :label="1">启用</el-radio>
          <el-radio v-model="PauseForm.status" :label="0">暂停</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="PauseShowEdit = false">关闭</el-button>
        <el-button :loading="PauseLoading" type="primary" @click="setPauseSave"
          >确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 客服编辑弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :lock-scroll="false"
      :title="'设置客服分组'"
      :visible.sync="SetGroupShowEdit"
      custom-class="ele-dialog-form"
      width="460px"
      @closed="SetGroupForm = {}"
    >
      <el-form ref="SetGroupForm" :model="SetGroupForm" label-width="82px">
        <el-form-item label="推广平台:" prop="platform">
          <el-select
            v-model="SetGroupForm.platform"
            class="ele-block"
            clearable
            placeholder="请选择推广平台"
            @change="platformChange"
          >
            <el-option
              v-for="item in platformList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="推广市场:" prop="bazaarId">
          <el-select
            v-model="SetGroupForm.bazaarId"
            class="ele-block"
            clearable
            placeholder="请选择推广市场"
            @change="bazaarIdChange"
          >
            <el-option
              v-for="item in tempbazaarList"
              :key="item.id"
              :disabled="item.status === 0"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客服分组:" prop="zoneid">
          <el-select
            v-model="SetGroupForm.zoneid"
            class="ele-block"
            clearable
            placeholder="请选择客服分组"
          >
            <el-option
              v-for="item in tempzoneList"
              :key="item.id"
              :disabled="item.status === 0"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="SetGroupShowEdit = false">关闭</el-button>
        <el-button
          :loading="SetGroupLoading"
          type="primary"
          @click="SetGroupSave"
          >确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueEdit from "./vue-edit";

export default {
  name: "serviceIndex",
  components: { VueEdit },
  data() {
    return {
      // 授权权限
      authority: true,

      // 列表加载中
      tableLoading: true,

      // 状态表单
      PauseForm: {},
      // 状态弹窗
      PauseShowEdit: false,
      // 状态加载中
      PauseLoading: false,

      // 客服表单
      SetGroupForm: {},
      // 客服弹窗
      SetGroupShowEdit: false,
      // 客服加载中
      SetGroupLoading: false,

      // 归属客户列
      customerList: [],

      // 表格高度
      defaultHeight: 0,
      // 展示平台
      sexList: [
        { value: 0, label: "女" },
        { value: 1, label: "男" },
      ],
      // 展示平台
      statusList: [
        { value: 1, label: "正常" },
        { value: 0, label: "停用" },
      ],
      // 展示平台
      platformList: [
        { value: 1, label: "百度SEM竞价" },
        { value: 2, label: "百度信息流" },
        { value: 3, label: "巨量引擎" },
        { value: 4, label: "搜狗推广" },
        { value: 5, label: "卧龙推广" },
        { value: 6, label: "360点睛" },
      ],
      // 表格数据接口
      url: "/Service/read",
      // 表格列配置
      columns: [
        {
          columnKey: "selection",
          type: "selection",
          width: 45,
          align: "center",
        },
        {
          prop: "platform",
          slot: "platform",
          label: "推广平台",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "bazaarId",
          slot: "bazaarId",
          label: "推广市场",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "customerid",
          slot: "customerid",
          label: "归属客户",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "zoneid",
          slot: "zoneid",
          label: "推广分组",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "name",
          label: "使用员工",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "nickname",
          label: "微信昵称",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "wechat",
          label: "微信号",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "phone",
          label: "手机号",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "sex",
          slot: "sex",
          label: "性别",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "qrcode",
          slot: "qrcode",
          label: "二维码",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          prop: "number",
          slot: "number",
          width: 100,
          label: "展现次数",
          sortable: "custom",
          showOverflowTooltip: false,
        },
        {
          width: 120,
          prop: "daycopynumber",
          slot: "daycopynumber",
          label: "今日复制次数",
          sortable: "custom",
          showOverflowTooltip: false,
        },
        {
          width: 140,
          slot: "lasttime",
          prop: "lasttime",
          label: "最后展示时间",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          width: 140,
          show: false,
          prop: "datetime",
          label: "最后修改时间",
          sortable: "custom",
          showOverflowTooltip: true,
        },
        {
          width: 80,
          prop: "status",
          label: "状态",
          sortable: "custom",
          resizable: false,
          slot: "status",
        },
        {
          width: 150,
          columnKey: "action",
          label: "操作",
          resizable: false,
          slot: "action",
        },
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 市场列表
      bazaarList: [],
      // 市场列表
      tempbazaarList: [],
      // 市场列表
      whereBazaarList: [],
      // 分组列表
      zoneList: [],
      // 分组列表
      tempzoneList: [],
      // 分组列表
      whereZoneList: [],
      // 是否显示编辑弹窗
      showEdit: false,
    };
  },

  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },

  methods: {
    setPlatformList(obj) {
      this.whereBazaarList = [];
      this.where = Object.assign({}, this.where, {
        bazaarId: null,
      });
      for (let i = 0; i < this.bazaarList.length; i++) {
        if (this.bazaarList[i].platform === obj) {
          this.whereBazaarList.push(this.bazaarList[i]);
        }
      }
      if (this.whereBazaarList.length > 1) {
        this.whereBazaarList.sort(function (a, b) {
          return b.status - a.status;
        });
      }
      this.reload();
    },

    setBazaarList(obj) {
      this.whereZoneList = [];
      this.where = Object.assign({}, this.where);
      for (let i = 0; i < this.zoneList.length; i++) {
        if (this.zoneList[i].bazaarId === obj) {
          this.whereZoneList.push(this.zoneList[i]);
        }
      }
      if (this.whereZoneList.length > 1) {
        this.whereZoneList.sort(function (a, b) {
          return b.status - a.status;
        });
      }
      this.reload();
    },

    handleClickRow(row, column) {
      if (this.isEmpty) return;
      if (column.property === "number") {
        this.$set(row, "editNumber", true);
        this.$nextTick(() => {
          this.$refs["newNumber"].focus();
        });
      }
    },

    handleClickBlur(row) {
      this.$set(row, "editNumber", false);
      if (row.newNumber != row.number) {
        this.$http
          .post("/service/SetReveal", row)
          .then((res) => {
            if (res.data.code === 0) {
              row.number = row.newNumber;
              this.$message({ type: "success", message: res.data.msg });
            } else {
              row.newNumber = row.number;
              this.$message.error(res.data.msg);
            }
          })
          .catch((e) => {
            row.newNumber = row.number;
            this.$message.error(e.message);
          });
      }
    },

    handleClick(i, item) {
      if (!this.$hasPermission("service:reveal")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.$confirm(
        "该操作不可恢复, " +
          [
            "您确定要增加展示10次吗?",
            "您确定要减少展示10次吗?",
            "您确定要重置展示数吗?",
          ][i],
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$http
            .post("/service/SetReveal", {
              type: ["plus", "minus", "reset"][i],
              id: item.id,
            })
            .then((res) => {
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                this.reload(true);
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.$message.error(e.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    platformChange(obj) {
      this.tempbazaarList = [];
      this.SetGroupForm = Object.assign({}, this.SetGroupForm, {
        bazaarId: null,
      });
      for (let i = 0; i < this.bazaarList.length; i++) {
        if (this.bazaarList[i].platform === obj) {
          this.tempbazaarList.push(this.bazaarList[i]);
        }
      }
      if (this.tempbazaarList.length > 1) {
        this.tempbazaarList.sort(function (a, b) {
          return b.status - a.status;
        });
      }
    },

    bazaarIdChange(obj) {
      this.tempzoneList = [];
      this.SetGroupForm = Object.assign({}, this.SetGroupForm);
      for (let i = 0; i < this.zoneList.length; i++) {
        if (this.zoneList[i].bazaarId === obj) {
          this.tempzoneList.push(this.zoneList[i]);
        }
      }
      if (this.tempzoneList.length > 1) {
        this.tempzoneList.sort(function (a, b) {
          return b.status - a.status;
        });
      }
    },

    SetGroupShow() {
      if (!this.$hasPermission("service:groups")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.SetGroupForm = {};
      this.SetGroupLoading = false;
      this.SetGroupShowEdit = true;
    },

    SetGroupSave() {
      this.$refs["SetGroupForm"].validate((valid) => {
        if (valid) {
          this.SetGroupLoading = true;
          this.SetGroupForm.selectId = this.selection.map((d) => d.id);
          this.$http
            .put("/service/SetGroups", this.SetGroupForm)
            .then((res) => {
              this.SetGroupLoading = false;
              if (res.data.code === 0) {
                this.SetGroupShowEdit = false;
                this.$message({ type: "success", message: res.data.msg });
                this.reload(true);
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.SetGroupLoading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },

    SetPauseShow() {
      if (!this.$hasPermission("service:pause")) {
        return this.$message.error("你没有权限执行此操作!");
      }
      this.PauseLoading = false;
      this.PauseForm = { status: 1 };
      this.PauseShowEdit = true;
    },

    setPauseSave() {
      this.$refs["PauseForm"].validate((valid) => {
        if (valid) {
          this.PauseLoading = true;
          this.PauseForm.selectId = this.selection.map((d) => d.id);
          this.$http
            .put("/service/setPause", this.PauseForm)
            .then((res) => {
              this.PauseLoading = false;
              if (res.data.code === 0) {
                this.PauseShowEdit = false;
                this.$message({ type: "success", message: res.data.msg });
                this.reload(true);
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.PauseLoading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },

    viewQrcode(qrcode) {
      if (qrcode) {
        this.$alert(
          '<img src="' + qrcode + '" style=" width: 270px; height: 270px;"/>',
          "二维码查看",
          {
            dangerouslyUseHTMLString: true,
            closeOnClickModal: true,
            customClass: "el-message-qr",
            showConfirmButton: false,
          }
        );
      }
    },

    parseData(res) {
      if (res.code === 0) {
        if (!res.authority) {
          this.columns = [
            {
              columnKey: "selection",
              type: "selection",
              width: 45,
              align: "center",
            },
            {
              prop: "platform",
              slot: "platform",
              label: "推广平台",
              sortable: "custom",
              showOverflowTooltip: true,
            },
            {
              prop: "bazaarId",
              slot: "bazaarId",
              label: "推广市场",
              sortable: "custom",
              showOverflowTooltip: true,
            },
            {
              prop: "name",
              label: "使用员工",
              sortable: "custom",
              showOverflowTooltip: true,
            },
            {
              prop: "nickname",
              label: "微信昵称",
              sortable: "custom",
              showOverflowTooltip: true,
            },
            {
              prop: "wechat",
              label: "微信号",
              sortable: "custom",
              showOverflowTooltip: true,
            },
            {
              prop: "phone",
              label: "手机号",
              sortable: "custom",
              showOverflowTooltip: true,
            },
            {
              prop: "sex",
              slot: "sex",
              label: "性别",
              sortable: "custom",
              showOverflowTooltip: true,
            },
            {
              prop: "qrcode",
              slot: "qrcode",
              label: "二维码",
              sortable: "custom",
              showOverflowTooltip: true,
            },
            {
              prop: "number",
              slot: "number",
              width: 100,
              label: "展现次数",
              sortable: "custom",
              showOverflowTooltip: false,
            },
            {
              width: 120,
              prop: "daycopynumber",
              slot: "daycopynumber",
              label: "今日复制次数",
              sortable: "custom",
              showOverflowTooltip: false,
            },
            {
              width: 140,
              slot: "lasttime",
              prop: "lasttime",
              label: "最后展示时间",
              sortable: "custom",
              showOverflowTooltip: true,
            },
            {
              width: 140,
              show: false,
              prop: "datetime",
              label: "最后修改时间",
              sortable: "custom",
              showOverflowTooltip: true,
            },
            {
              width: 80,
              prop: "status",
              label: "状态",
              sortable: "custom",
              resizable: false,
              slot: "status",
            },
            {
              width: 150,
              columnKey: "action",
              label: "操作",
              resizable: false,
              slot: "action",
            },
          ];
        }
        this.authority = res.authority;
        this.customerList = res.customer;
        this.bazaarList = res.bazaar;
        this.zoneList = res.zone;
      }
      this.tableLoading = false;
      return {
        code: res.code,
        data: res.data,
        count: res.count,
        msg: res.msg,
      };
    },

    /*设置表格高度*/
    getHeight() {
      this.defaultHeight = window.innerHeight - 360;
    },

    /* 落地页格式化 */
    format(value, limit) {
      if (!value) return "";
      if (value.length > limit) {
        return value.slice(0, limit) + "...";
      }
      return value;
    },

    /* 刷新表格 */
    reload(isPage) {
      let obj = { where: this.where };
      if (!isPage) {
        obj.page = 1;
      }
      this.$refs.table.reload(obj);
    },

    /* 重置搜索 */
    reset() {
      for (let key in this.where) {
        this.where[key] = null;
      }
      this.reload();
    },

    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },

    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      this.$http
        .delete("/service/delete/id/" + row.id)
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },

    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error("请至少选择一条数据");
        return;
      }
      this.$confirm("确定要删除选中的客服吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          const iad = this.selection.map((d) => d.id);
          const loading = this.$loading({ lock: true });
          this.$http
            .delete("/service/delete", {
              data: { id: iad.join(",") },
            })
            .then((res) => {
              loading.close();
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => {});
    },

    /* 更改状态 */
    editState(row) {
      const loading = this.$loading({ lock: true });
      this.$http
        .put("/service/setPause", { id: row.id, status: row.status })
        .then((res) => {
          loading.close();
          if (res.data.code === 0) {
            this.$message({ type: "success", message: res.data.msg });
          } else {
            row.state = !row.state ? 1 : 0;
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
  },
};
</script>
<style scoped>
.el-sex {
  vertical-align: middle;
  height: 16px;
  width: 16px;
}

.ele-body /deep/ .el-input--mini .el-input__inner {
  height: 24px;
  line-height: 24px;
}
</style>
